<template>
  <div id="addQuestionView">
    <div class="card">
      <h2 class="title">创建题目</h2>
      <a-form :model="form" label-align="left">
        <a-form-item field="title" label="标题">
          <a-input v-model:value="form.title" placeholder="请输入标题" />
        </a-form-item>


        <a-form-item label="标签" field="tags">
          <a-select
            v-model:value="form.tags"
            :options="tagOptions"
            mode="tags"
            placeholder="请选择标签"
            allowClear
          />
        </a-form-item>



        <a-form-item field="content" label="题目内容">


        </a-form-item>
        <MdEditor :value="form.content" :handle-change="onContentChange" />
        <a-form-item field="answer" label="答案">

        </a-form-item>
        <MdEditor :value="form.answer" :handle-change="onAnswerChange" />
        <a-form-item label="判题配置" :content-flex="false" :merge-props="false">
          <a-space direction="vertical" style="min-width: 480px">
            <a-form-item field="judgeConfig.timeLimit" label="时间限制">
              <a-input-number
                v-model:value="form.judgeConfig.timeLimit"
                placeholder="请输入时间限制"
                mode="button"
                min="0"
                size="large"
              />
            </a-form-item>
            <a-form-item field="judgeConfig.memoryLimit" label="内存限制">
              <a-input-number
                v-model:value="form.judgeConfig.memoryLimit"
                placeholder="请输入内存限制"
                mode="button"
                min="0"
                size="large"
              />
            </a-form-item>
            <a-form-item field="judgeConfig.stackLimit" label="堆栈限制">
              <a-input-number
                v-model:value="form.judgeConfig.stackLimit"
                placeholder="请输入堆栈限制"
                mode="button"
                min="0"
                size="large"
              />
            </a-form-item>
          </a-space>
        </a-form-item>
        <a-form-item
          label="测试用例配置"
          :content-flex="false"
          :merge-props="false"
        >
          <div class="judge-case-list">
            <a-form-item
              v-for="(judgeCaseItem, index) of form.judgeCase"
              :key="index"
              no-style
            >
              <div class="judge-case-card">
                <a-space direction="vertical" style="min-width: 340px">
                  <a-form-item
                    :field="`form.judgeCase[${index}].input`"
                    :label="`输入用例-${index}`"
                    :key="index"
                  >
                    <a-input
                      v-model:value="judgeCaseItem.input"
                      placeholder="请输入测试输入用例"
                    />
                  </a-form-item>
                  <a-form-item
                    :field="`form.judgeCase[${index}].output`"
                    :label="`输出用例-${index}`"
                    :key="index"
                  >
                    <a-input
                      v-model:value="judgeCaseItem.output"
                      placeholder="请输入测试输出用例"
                    />
                  </a-form-item>
                  <a-button status="danger" @click="handleDelete(index)" class="delete-btn">
                    删除
                  </a-button>
                </a-space>
              </div>
            </a-form-item>
            <div style="margin-top: 32px">
              <a-button @click="handleAdd" type="outline" status="success" class="add-btn"
                >新增测试用例
              </a-button>
            </div>
          </div>
        </a-form-item>
        <div style="margin-top: 16px" />
        <a-form-item>
          <a-button type="primary" style="min-width: 100%" @click="doSubmit" class="submit-btn"
            >提交
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import MdEditor from "@/components/MdEditor.vue";

import { useRoute } from "vue-router";
import { message } from 'ant-design-vue'
import {
  addQuestionUsingPost, getQuestionByIdUsingGet,
  getQuestionVoByIdUsingGet,
  updateQuestionUsingPost
} from '@/api/questionController.ts'



const tagOptions = ref<string[]>();
const route = useRoute();
// 如果页面地址包含 update，视为更新页面
const updatePage = route.path.includes("update");
//定义表单项结构和 loading 变量
const form = ref({
  title: "",
  tags: [],
  answer: "",
  content: "",
  judgeConfig: {
    memoryLimit: 1000,
    stackLimit: 1000,
    timeLimit: 1000,
  },
  judgeCase: [
    {
      input: "",
      output: "",
    },
  ],
});
// const form = ref<API.QuestionAddRequest>({
//   title: "",
//   tags: [],
//   answer: "",
//   content: "",
//   judgeConfig: {
//     memoryLimit: 1000,
//     stackLimit: 1000,
//     timeLimit: 1000,
//   },
//   judgeCase: [
//     {
//       input: "",
//       output: "",
//     },
//   ],
// });

/**
 * 根据题目 id 获取老的数据
 */
const loadData = async () => {
  const id = route.query.id;
  if (!id) {
    return;
  }
  const res = await getQuestionByIdUsingGet({
    id: id,
  })
  console.log(res);
  // if (res.data.code === 0 && res.data.data) {
  //   const data = res.data.data
  //   form.value.tags=data.tags,
  //     form.value.answer=data.title,
  //   form.value.content=data.content,
  //   form.value.judgeConfig=data.judgeConfig
  //
  // }

  if (res.data.code === 0 && res.data.data) {

    form.value = res.data.data;
    // json 转 js 对象
    if (!form.value.judgeCase) {
      form.value.judgeCase = [
        {
          input: "",
          output: "",
        },
      ];
    } else {
      form.value.judgeCase = JSON.parse(form.value.judgeCase as any);
    }
    if (!form.value.judgeConfig) {
      form.value.judgeConfig = {
        memoryLimit: 1000,
        stackLimit: 1000,
        timeLimit: 1000,
      };
    } else {
      form.value.judgeConfig = JSON.parse(form.value.judgeConfig as any);
    }
    if (!form.value.tags) {
      form.value.tags = [];
    } else {
      form.value.tags = JSON.parse(form.value.tags as any);
    }
  } else {
    message.error("加载失败，" + res.data.message);
  }
};

onMounted(() => {
  loadData();
});

const doSubmit = async () => {
  console.log(form.value);
  // 区分更新还是创建
  if (updatePage) {
    const res = await updateQuestionUsingPost(
      form.value
    );
    if (res.data.code === 0) {
      message.success("更新成功");
    } else {
      message.error("更新失败，" + res.data.message);
    }
  } else {

    const res = await addQuestionUsingPost(
        form.value,

    );
    if (res.data.code === 0) {
      message.success("创建成功");
    } else {
      message.error("创建失败，" + res.data.message);
    }
  }
};

/**
 * 新增判题用例
 */
const handleAdd = () => {
  form.value.judgeCase.push({
    input: "",
    output: "",
  });
};

/**
 * 删除判题用例
 */
const handleDelete = (index: number) => {
  form.value.judgeCase.splice(index, 1);
};

const onContentChange = (value: string) => {
  form.value.content = value;
};

const onAnswerChange = (value: string) => {
  form.value.answer = value;
};
</script>

<style scoped>
#addQuestionView {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  padding: 32px 0;
}
.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 40px 32px 32px 32px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: #222;
  letter-spacing: 2px;
}
.a-form-item {
  margin-bottom: 28px !important;
}
.a-form-item-label {
  font-weight: 600;
  color: #333;
}
.a-input, .a-input-number {
  border-radius: 8px;
  min-height: 40px;
  font-size: 1rem;
}
.a-input:focus, .a-input-number:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.1);
}
.submit-btn {
  min-width: 200px;
  height: 44px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}
.submit-btn:hover {
  background: #409eff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.15);
}
.add-btn {
  min-width: 160px;
  height: 38px;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s, box-shadow 0.2s;
}
.add-btn:hover {
  background: #67c23a;
  color: #fff;
  box-shadow: 0 2px 8px rgba(103,194,58,0.15);
}
.delete-btn {
  min-width: 100px;
  border-radius: 8px;
  font-weight: 500;
  margin-top: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}
.delete-btn:hover {
  background: #f56c6c;
  color: #fff;
  box-shadow: 0 2px 8px rgba(245,108,108,0.15);
}
.judge-case-list {
  width: 100%;
}
.judge-case-card {
  background: #f9fafc;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 24px 20px 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: box-shadow 0.2s;
}
.judge-case-card:hover {
  box-shadow: 0 4px 16px rgba(64,158,255,0.08);
}
@media (max-width: 900px) {
  .card {
    padding: 24px 8px 16px 8px;
    max-width: 98vw;
  }
  .judge-case-card {
    min-width: unset;
    padding: 16px 8px 12px 8px;
  }
}
</style>
